<template>
  <div class="wrapper">
    <!--  导航栏  -->
    <Header active="message" @getUser="getUser"/>
    <!--内容-->
    <div style="margin-top:20px;">
      <el-row type="flex" justify="left" align="middle">
        <el-col :offset="4" :span="16">
          <el-tabs type="border-card" @tab-click="changeTab" v-model="messageType">
            <el-tab-pane label="私信" name="message">
              <el-empty description="暂无私信" :image-size="screenHeight" v-if="conversationList.length==0"></el-empty>
              <el-row v-else>
                <el-col :span="24">
                  <el-row type="flex" justify="left" align="middle" v-for="(data,index) in conversationList"
                          :key="index">
                    <el-col>
                      <el-row>
                        <el-col :span="2">
                          <a :href="'/profile?userId='+data.from.id">
                            <el-avatar alt="用户头像" :src="data.from.headerUrl" fit="fill" title="查看主页"></el-avatar>
                          </a>
                        </el-col>
                        <el-col :span="22">
                          <el-row @click.native="showMessage(data.lastMessage.conversationId)" style="cursor:pointer;">
                            <el-col :span="8">
                              <span
                                  style="color: teal;font-size: 20px;float: left;">{{formatUserName(data.from)}}
                              </span>
                              <el-badge :value="data.unreadMessageCount" class="item" style="float:left;"
                                        v-if="data.unreadMessageCount>0" :max="99">
                              </el-badge>
                            </el-col>
                            <el-col :span="16">
                              <span style="font-size: 14px;opacity: 0.5;float: right;">{{
                                  data.lastMessage.createTime
                                }}</span>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                              <p style="float: left;">{{ data.lastMessage.content }}</p>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                      <el-row style="line-height: 1px;">
                        <el-col>
                          <hr style="opacity: 0.3;">
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="系统通知" name="system">
              <el-empty description="暂无系统通知" :image-size="screenHeight" v-if="conversationList.length==0"></el-empty>
              <el-row v-else>
                <el-col :span="24">
                  <el-row type="flex" justify="left" align="middle" v-for="(data,index) in conversationList"
                          :key="index">
                    <el-col>
                      <el-row>
                        <el-col :span="2">
                          <a href="#">
                            <el-avatar alt="用户头像" :src="data.from.headerUrl" fit="fill" title="系统管理员"></el-avatar>
                          </a>
                        </el-col>
                        <el-col :span="22">
                          <el-row>
                            <el-col :span="12">
                              <span style="font-size: 14px;opacity: 0.5;float: left;">{{
                                  data.lastMessage.createTime
                                }}</span>
                            </el-col>
                            <el-col :span="12">
                              <el-button-group style="float: right;">
                                <el-button style="float:right;" type="danger" size="mini"
                                           @click="updateStatus(data.lastMessage.id,2)">删除
                                </el-button>
                                <el-button style="float:right;" type="primary" size="mini"
                                           v-if="data.lastMessage.status==0"
                                           @click="updateStatus(data.lastMessage.id,1)">已读
                                </el-button>
                              </el-button-group>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col>
                              <p style="float: left;">{{ data.lastMessage.content }}</p>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                      <el-row style="line-height: 1px;">
                        <el-col>
                          <hr style="opacity: 0.3;">
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-pagination
          v-if="conversationList.length>0"
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--  底栏  -->
    <Footer/>

    <!--  弹出类对话框  -->
    <el-dialog
        title="提示"
        :visible.sync="newPostDialogShow"
        width="60%">
      <el-form :model="postFormData" label-width="50px">
        <el-form-item label="标题">
          <el-input v-model="postFormData.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="postFormData.content" type="textarea" :rows="10"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="newPostDialogShow = false">取 消</el-button>
      <el-button type="primary" @click="submitPost">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";

export default {
  name: "Message",
  components: {Footer, Header},
  data() {
    return {
      messageType: 'message',
      screenHeight: screen.availHeight / 2,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      newPostDialogShow: false,
      postFormData: {},
      post_add_url: '/community/home/post',
      message_list_url: '/community/message/list',
      message_update_url: '/community/message/status',
      user: null,
      conversationList: [],
    }
  },
  mounted() {
    this.getConversationList();
  },
  methods: {
    updateStatus(messageId, status) {
      this.axios.put(this.message_update_url + '/' + messageId + '/' + status).then((response) => {
        console.log(response);
        this.$message.success('操作成功!');
        this.getConversationList();
      }).catch((error) => {
        console.log(error);
        this.$message.error('操作失败!');
      });
    },
    formatUserName(from) {
      if (this.user.id === from.id) {
        return '我';
      }
      return from.username;
    },
    showMessage(conversationId) {
      this.$router.push({
        path: '/messageDetail',
        query: {conversationId: conversationId}
      });
    },
    getUser(user) {
      console.log('getUser:', user);
      this.user = user;
    },
    changeTab() {
      this.getConversationList();
    },
    getConversationList() {
      this.axios.get(this.message_list_url + '/' + this.messageType,
          {
            params: {pageSize: this.pageSize, pageNum: this.pageNum}
          }).then((response) => {
        console.log(response);
        this.conversationList = response.data.data.data;
        this.total = response.data.total;
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getConversationList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getConversationList();
    },
    showPostDialog() {
      this.newPostDialogShow = true;
    },
    submitPost() {
      this.axios.post(this.post_add_url,
          this.postFormData
      ).then((response) => {
        console.log(response);
        this.newPostDialogShow = false;
        if (response.data.code === '00000') {
          this.getConversationList();
        } else {
          this.$message.error(response.data.message);
        }
      }).catch((error) => {
        this.newPostDialogShow = false;
        console.log(error);
        this.$message.error(error);
      });
      this.postFormData = {};
    }
  }
}
</script>

<style scoped>
.list-unstyled {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

>>> *.el-tag {
  margin-left: 5px;
}

p {
  font-size: 18px;
  line-height: 20px;
  overflow: hidden; /* 超出的文本隐藏 */
  text-overflow: ellipsis; /* 溢出用省略号显示 */
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
  -webkit-line-clamp: 1; /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
}
</style>
